<template>
  <div class="relation-selector-modal-layout">
    <div class="relation-selector-modal-layout-header">
      <slot name="header"/>
    </div>
    <div class="relation-selector-modal-layout-body">
      <slot/>
    </div>
    <div class="relation-selector-modal-layout-footer">
      <slot name="footer"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RelationSelectorModalLayout'
}
</script>
<style>
.relation-selector-modal-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.relation-selector-modal-layout-body {
  flex: 1;
  overflow: hidden;
}
.relation-selector-modal-layout-footer {
  text-align: right;
  padding-right: 20px;
}
.relation-selector-modal-layout-footer,
.relation-selector-modal-layout-header {
  height: fit-content;
}

.relation-selector-modal-layout {
}
</style>